<template>
  <div class="app-container home">
    <div id="chartContainer" style="width: 600px; height: 400px;"></div>
    <div id="chartContainerCustom" style="height: 400px; width:1000px"></div>
  </div>
</template>

<script setup name="Index">
import { listCustom, getCustom, delCustom, addCustom, updateCustom, getCurrentYearData, lastFiveYearData } from "@/api/quality/custom";
import { listSupplier, getSupplier, delSupplier, addSupplier, updateSupplier, getSupplierYearData } from "@/api/quality/supplier";
const thisYearData = ref({})
const fiveYearsAvgData = ref({})
import * as echarts from 'echarts';
onMounted(() => {
  getCurrentYearData().then(res => {
    thisYearData.value = res;
    lastFiveYearData().then(response => {
      fiveYearsAvgData.value = response;
      const allMonths = Array.from({ length: 12 }, (_, i) => i + 1);

      // 今年客户数量
      const thisYear = allMonths.map(month => ({
        month: month,
        count: thisYearData.value.data.find(data => data.month === month)?.count || 0
      }));

      // 过去五年客户数量均值
      const fiveYearsAverage = allMonths.map(month => ({
        month: month,
        count: fiveYearsAvgData.value.data.find(data => data.month === month)?.count || 0
      }));

      // 初始化ECharts实例
      const chart = echarts.init(document.getElementById('chartContainerCustom'));

      // 配置项
      const option = {
        title: {

        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return params[0].name + '<br/>' +
              params[0].seriesName + ': ' + params[0].value + '<br/>' +
              params[1].seriesName + ': ' + params[1].value;
          }
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: ['今年客户数量', '过去五年客户数量均值']
        },
        xAxis: {
          type: 'category',
          data: allMonths.map(month => month.toString() + '月'),
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          name: '客户数量',
          min: 0
        },
        series: [
          {
            name: '今年客户数量',
            data: thisYear.map(item => item.count),
            type: 'line',
            areaStyle: {},
            color: 'green'
          },
          {
            name: '过去五年客户数量均值',
            data: fiveYearsAverage.map(item => item.count / 5),
            type: 'line',
            areaStyle: {},
            color: 'blue'
          }
        ]
      };

      // 使用配置项
      chart.setOption(option);
    })
  })
  let jsonData = null;

  getSupplierYearData().then(res => {
    jsonData = res;
    // 处理数据，构建月份与计数的映射，并确定所有月份范围
    const monthsWithData = jsonData.data.reduce((acc, cur) => {
      acc[cur.month] = (acc[cur.month] || 0) + cur.count;
      return acc;
    }, {});

    const allMonths = Array.from({ length: 12 }, (_, i) => i + 1); // 假设数据覆盖一年的12个月

    // 确保所有月份都有对应数据，没有数据的月份count设为0
    const fullData = allMonths.map(month => ({
      month: month,
      count: monthsWithData[month] || 0
    }));

    // 初始化ECharts实例
    const chart = echarts.init(document.getElementById('chartContainer'));

    const option = {
      title: {

      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          return params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value;
        }
      },
      legend: {
        left: 'center',
        top: 'bottom',
        data: ["供应商数量"]
      },

      xAxis: {
        type: 'category',
        data: fullData.map(item => item.month + '月'),
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        min: 0,

      },
      series: [{
        name: "供应商数量",
        data: fullData.map(item => item.count),
        type: 'line',
        symbolSize: 8,
        lineStyle: {
          normal: {
            width: 2
          }
        }


      }]
    };
    chart.setOption(option);
  })

  // 使用配置项
})
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
